<template>
  <div class="homeintro">
    <div class="enterprise">
      <div class="t">企业介绍</div>
      <div class="m">广东泊天健康管理有限公司</div>
      <div class="b">
        主要研发康复医疗设备，形成以产学研为主的智慧健康科技医疗辅助设备，以研发、制造、平台销售和服务
        为一体的大健康医疗辅助设备解决方案平台
        公司拥有国际领先的核心技术和产品和高端人才团队，拥有成熟和成功的临床经验，在服务于病人健康治疗
        如痛风、高血压、失眠等通过我们平台的科学管理和辅助治疗
        治愈成功率高达80%以上
      </div>
      <div class="more" @click="setCate(5)">
        <nuxt-link to="/about">了解更多>></nuxt-link>
      </div>
    </div>
    <div class="product">
      <div class="t">产品介绍</div>
      <ul class="list">
        <nuxt-link to="/theory">
          <li @click="setCate(1)">
            <div class="img">
              <img src="~assets/image/home/p1.jpg" alt="" />
            </div>
            <div class="text">
              <div class="title">能量波治疗</div>
              <div class="desc">
                通过能量波，生物电对人体的病理和穴位细胞进行激活和提升人力机能，使...
              </div>
            </div>
          </li>
        </nuxt-link>
        <nuxt-link to="/theory">
          <li @click="setCate(1)">
            <div class="img">
              <img src="~assets/image/home/p2.jpg" alt="" />
            </div>
            <div class="text">
              <div class="title">中医穴位</div>
              <div class="desc">
                根据中医辨证和能量波穴位结合治疗，恢复健康内循环，解决病理的根源症状。
              </div>
            </div>
          </li>
        </nuxt-link>
        <nuxt-link to="/theory">
          <li @click="setCate(1)">
            <div class="img">
              <img src="~assets/image/home/p3.jpg" alt="" />
            </div>
            <div class="text">
              <div class="title">智慧健康</div>
              <div class="desc">
                恢复细胞能量，增强和恢复人体自身机
                能，通过精准的药食同源食疗以及健...
              </div>
            </div>
          </li>
        </nuxt-link>
      </ul>
    </div>
  </div>
</template>

<script>
// 此行导入其他文件（如组件，工具js，第三方插件js，json文件，图片文件等）
export default {
  name: "HomeIntro",
  props: {},
  methods: {
    setCate(index) {
      this.$store.commit("setCate", index);
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.homeintro {
  margin: 0.57rem 0.35rem 0.52rem;
  /* border: 1px solid red; */
  color: #0b203e;
}
.t {
  font-size: 0.33rem;
  font-weight: 800;
  line-height: 0.47rem;
  position: relative;
}
.t::before {
  width: 0.66rem;
  height: 0.02rem;
  content: "";
  background-color: #0088ff;
  position: absolute;
  bottom: 0;
  left: 0.34rem;
}
.enterprise .t {
  margin-top: 0.18rem;
  margin-bottom: 0.26rem;
}
.enterprise .m {
  font-size: 0.28rem;
  font-weight: bold;
  margin-bottom: 0.23rem;
}
.enterprise .b {
  color: #a2a3a6;
  font-size: 0.21rem;
  line-height: 0.38rem;
}
.enterprise .more {
  width: 1.7rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: #fff;
  background-color: #0c5da9;
  font-size: 0.21rem;
  margin: 0.26rem auto;
}
.product {
  padding-bottom: 0.41rem;
}
.product .t {
  margin-bottom: 0.26rem;
}
.product .list li {
  height: 1.85rem;
  display: flex;
  align-items: center;
  box-shadow: 0 0 0.28rem rgb(240, 240, 240);
}
.product .list .img {
  width: 2.53rem;
  height: 1.6rem;
  margin-right: 0.21rem;
}
.product .list img {
  width: 2.53rem;
}
.product .list .text {
  width: 3.6rem;
  height: 1.6rem;
}
.product .list .text .title {
  font-size: 0.28rem;
  padding-left: 0.08rem;
  margin-bottom: 0.09rem;
  border-left: 0.02rem solid #0088ff;
}
.product .list .text .desc {
  font-size: 0.21rem;
  line-height: 0.28rem;
  color: #a2a3a6;
  /* 多行文本省略 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
